<template>
	<view class="bill-index" :class="{empty: false}">
		<view class="bill-view" v-if="true">
			<view class="account-box">
				<view class="account-header flex-between-center">
					<view class="flex-align-center">
						<view class="">订单编号：{{info.orderNo || '-'}}</view>
						<static-image @click="$common.setClipboardData(info.orderNo)" src="/pagesA/static/img/order/icon-copy.png" width="24" height="24" margin-left="8"></static-image>
					</view>
					<static-image src="/static/img/bill/title-account.png" width="144" height="32"></static-image>
				</view>
				<view class="account-content">
					<template v-if="info.waitNum">
						<view class="">本期（{{info.currentPeriodNum || 0}}/{{info.totalPeriodNum || 0}}期）</view>
						<view class="total-money"><text>￥</text>{{info.waitRepayAmount || 0}}</view>
						<view class="color-999 font-s-12">待还金额</view>
						<!-- <view class="mar-t-24">
							<u-button type="primary" shape="circle" @click="$common.navigator('/pagesA/setting/contact')" :custom-style="{background:'#3385FF',width:'316rpx',height:'90rpx',fontSize:'32rpx',fontWeight:'bold',letterSpacing: '8rpx'}">立即还款</u-button>
						</view> -->
					</template>
					<view v-else class="finish-text">本单全部期数已还清</view>
					<view class="total-number-box">
						<view class="">
							<view class="font-s-16 fw-b">¥{{info.fundAmount || 0}}</view>
							<view class="color-999 mar-t-8">贷款总金额</view>
						</view>
						<view class="">
							<view class="font-s-16 fw-b">¥{{info.totalWaitRepayAmount || 0}}</view>
							<view class="color-999 mar-t-8">剩余待还金额</view>
						</view>
						<view class="">
							<view class="font-s-16 fw-b">{{info.waitNum || 0}}笔</view>
							<view class="color-999 mar-t-8">剩余待还期数</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-between-center">
				<view class="handle-card-item flex-between-center" @click="$common.navigator('/pagesA/order/detail?orderId='+info.orderId)">
					<view class="flex-align-center">
						<static-image src="/static/img/bill/icon-ddxq.png" width="48" height="48" margin-right="16"></static-image>
						<view class="font-s-16 fw-b">订单详情</view>
					</view>
					<static-image src="/static/img/bill/arrow-right-1.png" width="32" height="32"></static-image>
				</view>
				<view class="handle-card-item flex-between-center" @click="$common.navigator('/pagesA/setting/contact')">
					<view class="flex-align-center">
						<static-image src="/static/img/bill/icon-lxkf.png" width="48" height="48" margin-right="16"></static-image>
						<view class="font-s-16 fw-b">联系客服</view>
					</view>
					<static-image src="/static/img/bill/arrow-right-1.png" width="32" height="32"></static-image>
				</view>
			</view>
			<view class="month-bill-list">
				<view class="month-bill-item" v-for="(item,index) in info.list" :key="index">
					<view class="flex-between-center">
						<view class="fw-b">账单·第{{index+1}}期</view>
						<view class="font-s-12 color-999">{{item.planEndDate || '-'}}</view>
					</view>
					<view class="total-top-border flex-between-center">
						<text class="color-666">本期还款总额：</text>
						<text class="fw-b">￥{{(item.outFlag===1?item.realTotalAmt:item.remainShouldTotalAmt) || 0}}</text>
					</view>
					<view class="item-money-box">
						<view class="flex-between-center">
							<text class="">还款金额</text>
							<text class="fw-b">￥{{(item.isBenRepay===1?item.realBenTotalAmt:item.remainShouldBenTotalAmt) || 0}}</text>
						</view>
						<view class="font-s-12 flex-align-center mar-t-10 color-999">
							<view class="">
								<text class="">含本金</text>
								<text class="color-orange fw-b mar-l-2">￥{{(item.isBenRepay===1?item.realPrincipal:item.remainShouldPrincipal) || 0}}</text>
							</view>
							<view class="">
								<text class="">，利息</text>
								<text class="color-orange fw-b mar-l-2">￥{{(item.isBenRepay===1?item.realInterest:item.remainShouldInterest) || 0}}</text>
							</view>
							<view class="" v-if="item.remainShouldFine || item.realFine">
								<text class="">，滞纳金</text>
								<text class="color-orange fw-b mar-l-2">￥{{(item.isBenRepay===1?item.realFine:item.remainShouldFine) || 0}}</text>
							</view>
						</view>
						<view class="flex-between-center mar-t-11">
							<view class="status-tag red-tag" v-if="item.outFlag===2">已逾期</view>
							<view class="status-tag green-tag" v-else-if="item.isBenRepay===1">已还款</view>
							<view class="status-tag orange-tag" v-else>待还款</view>
							<view class="btn-box view-btn" @click.stop="toDetail(item, 1)" v-if="item.isBenRepay===1">查看明细</view>
							<view class="btn-box" @click.stop="$common.navigator('/pagesA/bill/payment?payRepayType=2&billId='+item.id)" v-else>立即还款</view>
						</view>
					</view>
					<view class="item-money-box">
						<view class="flex-between-center">
							<text class="">担保费用</text>
							<text class="fw-b">￥{{(item.isAssureRepay===1?item.realAssure:item.remainShouldAssure) || 0}}</text>
						</view>
						<view class="flex-between-center mar-t-11">
							<view class="status-tag green-tag" v-if="item.isAssureRepay==1">已还款</view>
							<view class="status-tag orange-tag" v-else>待还款</view>
							<view class="btn-box view-btn" @click.stop="toDetail(item, 2)" v-if="item.isAssureRepay===1">查看明细</view>
							<view class="btn-box" @click.stop="$common.navigator('/pagesA/bill/payment?payRepayType=1&billId='+item.id)" v-else>立即还款</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<empty v-else height="85vh" text="暂无账单"></empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					list: []
				}
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				this.$request({
					url: '/orderInfo/selectOrderBill',
					method: 'get',
					data:{id:this.orderId}
				}).then(res => {
					this.info = res.data
				})
			},
			toDetail(row,source){
				row.source = source
				uni.setStorageSync('billDetailInfo',row)
				uni.navigateTo({
					url:'/pagesA/bill/detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bill-index {
		&.empty{
			background-color: #fff;
			height: 100vh;
			/* #ifdef H5 */
			height: calc(100vh - 50px);
			/* #endif */
		}
		.bill-view{
			background-image: url('~@/static/img/bill/header-bg.png');
			background-size: 100% 480rpx;
			background-repeat: no-repeat;
			padding: 32rpx 24rpx;
			.history-bill-text{
				color: rgba(255,255,255,0.72);
			}
			.account-box{
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-bottom: 24rpx;
				.account-header{
					height: 88rpx;
					background: #EBF7FF;
					border-radius: 24rpx 24rpx 0px 0px;
					padding: 0 24rpx;
					font-size: 24rpx;
					font-weight: bold;
				}
				.account-content{
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 48rpx 0;
					.finish-text{
						font-size: 60rpx;
						font-weight: bold;
						padding: 32rpx 0;
						color: #49bf0e;
					}
					.total-money{
						font-weight: bold;
						font-size: 64rpx;
						margin: 18rpx 0;
						text{
							font-size: 48rpx;
						}
					}
					.total-number-box{
						display: flex;
						align-items: center;
						width:100%;
						margin-top: 48rpx;
						>view{
							flex: 1;
							text-align: center;
						}
					}
				}
			}
			.handle-card-item{
				width: 340rpx;
				height: 112rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 0 32rpx;
			}
			.month-bill-list{
				.month-bill-item{
					padding-bottom: 48rpx;
					position: relative;
					margin-top: 24rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					padding: 32rpx 24rpx;
					.total-top-border{
						border-top: 2rpx solid #F5F5F5;
						padding-top: 32rpx;
						margin-top: 32rpx;
					}
					.item-money-box{
						width: 100%;
						background: #FAFBFC;
						border-radius: 16rpx;
						padding: 24rpx;
						margin-top: 24rpx;
					}
					.status-tag{
						display: inline-block;
						padding: 0 8rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #F5F7FA;
						border-radius: 4rpx;
						color: #999999;
						font-size: 24rpx;
						&.blue-tag{
							background: rgba(31,120,255,0.08);
							color: #1F78FF;
						}
						&.orange-tag{
							background: rgba(255,133,51,0.12);
							color: #FF8533;
						}
						&.red-tag{
							background: rgba(245,56,49,0.08);
							color: #F53831;
						}
						&.green-tag{
							background: rgba(24,204,132,0.08);
							color: #18CC84;
						}
					}
					.btn-box{
						width: 144rpx;
						height: 56rpx;
						background: #1F78FF;
						border-radius: 32rpx;
						color: #fff;
						text-align: center;
						line-height: 56rpx;
						font-size: 24rpx;
						&.view-btn{
							background: rgba(31,120,255,0.08);
							color: #1F78FF;
						}
					}
				}
			}
		}
	}
</style>
